<template>
	<view class="comp-box">
		<view class="navigator-bar" :style="{'padding-top': safeTop + 'px'}">消息</view>
		<view class="tip-box">
			<view class="tip-text">开启通知，及时收到活动消息</view>
			<view class="tip-button">开启</view>
		</view>
		<scroll-view class="message-list" scroll-y="true">
			<view class="notice-box">
				<view class="notice-item" @click="jumpToNoticeList(1)">
					<view class="img-box">
						<image class="notice-img-activity" src="/static/mesActivity.png"></image>
						<view class="notice-num">9</view>
					</view>
					<view class="notice-text">活动通知</view>
				</view>
				<view class="notice-item" @click="jumpToInteractNoticeList()">
					<view class="img-box">
						<image class="notice-img-social" src="/static/mesSocial.png"></image>
						<view class="notice-num">9</view>
					</view>
					<view class="notice-text">互动通知</view>
				</view>
				<view class="notice-item" @click="jumpToNoticeList(0)">
					<view class="img-box">
						<image class="notice-img-system" src="/static/mesSystem.png"></image>
						<view class="notice-num">9</view>
					</view>
					<view class="notice-text">系统通知</view>
				</view>
			</view>
			<view class="list-item" @click="jumpToChatRoom()">
				<view class="avatar-box">
					<image class="avatar-img" src="/static/logo.png"></image>
					<image class="sex-img" src="/static/portraitTagGirl-s.png"></image>
				</view>
				<view class="content-box">
					<view class="name-row">
						<view class="name-text">官方号</view>
						<view class="time-text">2小时前</view>
					</view>
					<view class="content-text">元旦活动大推荐，赶紧跟随我们一起瞅一..元旦活动大推荐，赶紧跟随我们一起瞅一..</view>
				</view>
			</view>
			<view class="list-item">
				<view class="avatar-box">
					<image class="avatar-img" src="/static/logo.png"></image>
					<image class="sex-img" src="/static/portraitTagGirl-s.png"></image>
				</view>
				<view class="content-box">
					<view class="name-row">
						<view class="name-text">官方号</view>
						<view class="time-text">2小时前</view>
					</view>
					<view class="content-text">元旦活动大推荐，赶紧跟随我们一起瞅一..元旦活动大推荐，赶紧跟随我们一起瞅一..</view>
				</view>
			</view>
			<view class="list-item">
				<view class="avatar-box">
					<image class="avatar-img" src="/static/logo.png"></image>
					<image class="sex-img" src="/static/portraitTagGirl-s.png"></image>
				</view>
				<view class="content-box">
					<view class="name-row">
						<view class="name-text">官方号</view>
						<view class="time-text">2小时前</view>
					</view>
					<view class="content-text">元旦活动大推荐，赶紧跟随我们一起瞅一..元旦活动大推荐，赶紧跟随我们一起瞅一..</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "message",
		data() {
			return {
				index: 0,
				safeTop: 0,
				messageList: []
			};
		},
		mounted() {
			this.safeTop = this.$safeTop;
			this.initData();
		},
		methods: {
			jumpToChatRoom() {
				uni.navigateTo({
					url: '/pages/chatRoom'
				})
			},
			jumpToNoticeList(type) {
				uni.navigateTo({
					url: '/pages/noticeList?type=' + type
				})
			},
			jumpToInteractNoticeList() {
				uni.navigateTo({
					url: '/pages/interactNotice'
				})
			},
			initData() {
				this.getNoticeCount();
				this.getMessageList();
			},
			getNoticeCount() {
				this.$apis.getNoticeCount({}).then(res => {
					if (res.code === 0) {
						console.log(res);
					}
				})
			},
			getMessageList() {
				this.$apis.getMessageList({}).then(res => {
					if (res.code === 0) {
						this.messageList = res.data.list;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.comp-box {
		width: 100vw;


		.navigator-bar {
			width: 100%;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			color: #222222;
		}

		.tip-box {
			width: 750rpx;
			height: 80rpx;
			background: #FFF5E6;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.tip-text {
				font-size: 28rpx;
				font-weight: 400;
				color: #222222;
				margin-left: 32rpx;
			}
			
			.tip-button {
				width: 112rpx;
				height: 56rpx;
				background: #FF5E2E;
				border-radius: 28rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 56rpx;
				text-align: center;
				margin-right: 32rpx;
			}
		}
		
		.message-list {
			width: 100%;
			
			.notice-box {
				width: 100%;
				padding: 48rpx 0;
				display: flex;
				justify-content: space-evenly;
				
				.notice-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					
					.img-box {
						width: 128rpx;
						height: 128rpx;
						background: #F6F7F9;
						border-radius: 48rpx;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						
						.notice-img-activity {
							width: 48rpx;
							height: 56rpx;
						}
						
						.notice-img-social {
							width: 56rpx;
							height: 56rpx;
						}
						
						.notice-img-system {
							width: 56rpx;
							height: 44rpx;
						}
						
						.notice-num {
							width: 42rpx;
							height: 42rpx;
							border-radius: 42rpx;
							background: #FA3D1B;
							border: 4rpx solid #FFFFFF;
							position: absolute;
							top: -21rpx;
							right: -21rpx;
							font-size: 24rpx;
							font-weight: bold;
							color: #FFFFFF;
							line-height: 42rpx;
							text-align: center;
						}
					}
					
					.notice-text {
						font-size: 28rpx;
						font-weight: 400;
						color: #222222;
						margin-top: 12rpx;
					}
				}
			}
		
			.list-item {
				width: 100vw;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx 0;
				
				.avatar-box {
					width: 112rpx;
					height: 112rpx;
					position: relative;
					margin-left: 32rpx;
					
					.avatar-img {
						width: 112rpx;
						height: 112rpx;
						border-radius: 112rpx;
					}
					
					.sex-img {
						width: 32rpx;
						height: 32rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
				
				.content-box {
					width: 540rpx;
					margin-right: 32rpx;
					
					.name-row {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.name-text {
							width: 400rpx;
							font-size: 32rpx;
							font-weight: 400;
							color: #222222;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						
						.time-text {
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}
					}
					
					.content-text {
						margin-top: 20rpx;
						width: 540rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>
